doctype html
html(lang="en" ng-app="3drepo")
	head
		base(href="/")

		// Meta, title, CSS, favicons, etc.
		meta(charset='utf-8')
		meta(http-equiv='X-UA-Compatible', content='IE=edge')

		title 3D Repo

		// CSS Files
		link(rel='stylesheet', type='text/css', href='#{baseURL}/public/css/external/font-awesome.min.css')
		link(rel='stylesheet', type='text/css', href='#{baseURL}/public/css/ui.css')
		link(rel='stylesheet', type='text/css', href='#{baseURL}/public/css/external/angular-material.min.css')
		link(rel='stylesheet', type='text/css', href='#{baseURL}/public/css/external/three-d-repo.css')



		// All CSS minified
		link(rel='stylesheet', type='text/css', href='#{baseURL}/public/dist/three_d_repo.min.css')

		// Styling used in the Angular Material demos
		link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic")

	body
		billing.ng-scope.ng-isolate-scope(username='vm.query.username', token='vm.query.token', query='vm.query')
			div(layout-fill, layout="column", class="layout-fill layout-column")
				// md-toolbar.noPrint
				// 	.md-toolbar-tools
				// 		span(flex)
				// 		img(src="/public/images/3drepo-logo-white.png")
				// 		span(flex)
				// 		md-button.md-icon-button(aria-label="Home", ng-click="home()")
				// 			md-icon.angular-material-icons home

				md-content(ng-if="showBilling", layout="row", flex="none", layout-align="center", class="ng-scope _md layout-align-center-stretch layout-row flex-none")
					div(layout="column", class="layout-column", style="width:90%")
						#billingCompanyAddress(layout="row", layout-align="start start", class="layout-align-start-start layout-row")
							div(layout="column", class="layout-column flex-45", flex="45")
								label.md-title 3D Repo
								label 20 Eastbourne Terrace
								label London
								label W2 6LG
								label United Kingdom
								label VAT registration: GB 206 9090 15
								label
									| Email:
									=" "
									a(href="mailto:support@3drepo.org") support@3drepo.org

							span.flex(flex)

							div(layout="column", layout-align="end end", class="layout-align-end-end layout-column")
								img#billingInvoiceLogo(src="#{baseURL}/public/images/logo.png" style="height:57.5px")
								p.md-display-1.ng-binding 
														| Credit Note

								if !billing.pending
									span PayPal transaction ID: #{billing.transactionId}

							//span(flex)
							//md-button.md-raised.md-accent.noPrint(ng-click="vm.print()") Print

						#billingGap1

						.billingInfoTitle(layout="row", flex="none", class="billingInfoTitle layout-row flex-none")
							label(flex="30", class="flex-30") To
							label(flex="30", class="flex-30") Date
							label(flex="20", class="flex-20") Credit Note Number

						md-divider(flex="none", class="flex-none")

						#billingClientAddress(layout="row", flex="none", class="layout-row flex-none")
							div(layout="column", class="layout-column flex-30", flex="30")
								label #{billing.info.firstName} #{billing.info.lastName}
								if billing.info.company
									label #{billing.info.company}
								label #{billing.info.line1}
								if billing.info.line2
									label #{billing.info.line2}
								label #{billing.info.city}
								label #{billing.info.postalCode}
								label #{billing.info.country}
								if billing.info.vat
									label VAT ID: #{billing.info.vat}
							label(flex="30", class="ng-binding flex-30") #{billing.createdAt} GMT
							label(flex="20", class="flex-20") #{billing.invoiceNo}

						.billingInfoTitle.layout-row.flex-none(layout="row", flex="none", class="flex-none")
							label(flex="60", class="flex-60") Description
							label(flex="10", class="flex-10") Net
							label(flex="10", class="flex-10") VAT (%)
							label(flex="10", class="flex-10") VAT
							label Total

						md-divider(flex="none", class="flex-none")

						#billingProductInfo(layout="row", flex="none", class="layout-row flex-none")
							div(flex="60", layout="column", class="layout-column flex-60", layout-align="start")
								label 
									| Refund
							label(flex="10", class="ng-binding flex-10") £#{billing.netAmount}
							label(flex="10", class="ng-binding flex-10") #{billing.taxPercentage}%
							label(flex="10", class="ng-binding flex-10") £#{billing.taxAmount}
							label#billingTotalValue(class="ng-binding") £#{billing.amount}


